<template>
  <div>
    <userTitel :title="title"></userTitel>
    <!-- 卡片 -->
    <el-card shadow="never">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-form :inline="true">
            <el-form-item
              label="员工编号 :"
              style="margin-left: 40px; margin-right: 200px"
            >
              <span v-if="!show">{{ formDate.userId }}</span>
              <!-- 编辑显示 -->
              <el-input
                disabled
                v-if="show"
                v-model="formDate.userId"
              ></el-input>
            </el-form-item>
            <el-form-item label="司机名称 :" style="margin-right: 200px">
              <span v-if="!show">{{ formDate.name }}</span>
              <!-- 编辑显示 -->
              <el-input disabled v-if="show" v-model="formDate.name"></el-input>
            </el-form-item>
            <el-form-item label="所属机构 :">
              <span v-if="!show">{{ formDate.agency.name }}</span>
              <!-- 编辑显示 -->
              <el-input
                disabled
                v-if="show"
                v-model="formDate.agency.name"
              ></el-input>
            </el-form-item>
            <br />
            <el-form-item
              label="电话 :"
              style="margin-left: 40px; margin-right: 295px"
            >
              <span v-if="!show">{{ formDate.mobile }}</span>
              <!-- 编辑显示 -->
              <el-input
                disabled
                v-if="show"
                v-model="formDate.mobile"
              ></el-input>
            </el-form-item>
            <el-form-item label="年龄 :">
              <span v-if="!show">{{ formDate.age }}</span>
              <!-- 编辑显示 -->
              <el-input v-if="show" v-model="formDate.age"></el-input>
            </el-form-item>
          </el-form>
          <el-container>
            <el-footer style="margin-top: 250px">
              <el-row type="flex" justify="center">
                <el-button
                  v-if="!show"
                  size="medium"
                  type="primary"
                  @click="basicEdit"
                  >编辑</el-button
                >
                <el-button
                  v-if="show"
                  size="medium"
                  type="primary"
                  @click="submitBasic"
                  >确认</el-button
                >
                <el-button v-if="show" size="medium" @click="show = false"
                  >取消</el-button
                >
              </el-row>
            </el-footer>
          </el-container>
        </el-tab-pane>
        <el-tab-pane label="驾驶证信息" name="second">
          <el-form :inline="true">
            <el-form-item
              label="驾驶证号 :"
              style="margin-left: 40px; margin-right: 200px"
            >
              <span v-if="!isShow">{{ formDrive.licenseNumber }}</span>
              <!-- 编辑显示 -->
              <el-input
                v-if="isShow"
                v-model="formDrive.licenseNumber"
              ></el-input>
            </el-form-item>
            <el-form-item label="驾准车型 :" style="margin-right: 200px">
              <span v-if="!isShow">{{ formDrive.allowableType }}</span>
              <!-- 编辑显示 -->
              <el-input
                v-if="isShow"
                v-model="formDrive.allowableType"
              ></el-input>
            </el-form-item>
            <el-form-item label="初次领证日期 :">
              <span v-if="!isShow">{{ formDrive.initialCertificateDate }}</span>
              <!-- 编辑显示 -->
              <el-date-picker
                v-if="isShow"
                v-model="formDrive.initialCertificateDate"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <br />
            <el-form-item
              label="驾驶证有效期限 :"
              style="margin-left: 40px; margin-right: 210px"
            >
              <span v-if="!isShow">{{ formDrive.validPeriod }} 年</span>
              <!-- 编辑显示 -->
              <el-input v-if="isShow" v-model="formDrive.validPeriod">
                <span style="margin-right: 10px; color: #333" slot="suffix"
                  >年</span
                >
              </el-input>
            </el-form-item>
            <el-form-item label="驾龄 :" style="margin-right: 270px">
              <span v-if="!isShow">{{ formDrive.driverAge }}</span>
              <!-- 编辑显示 -->
              <el-input v-if="isShow" v-model="formDrive.driverAge">
                <span style="margin-right: 10px; color: #333" slot="suffix"
                  >年</span
                >
              </el-input>
            </el-form-item>
            <el-form-item label="驾驶证类型 :">
              <span v-if="!isShow">{{ formDrive.licenseType }}</span>
              <!-- 编辑显示 -->
              <el-input
                v-if="isShow"
                v-model="formDrive.licenseType"
              ></el-input>
            </el-form-item>
            <br />
            <el-form-item
              label="从业资格证 :"
              style="margin-left: 40px; margin-right: 230px"
            >
              <span v-if="!isShow">{{
                formDrive.qualificationCertificate
              }}</span>
              <!-- 编辑显示 -->
              <el-input
                v-if="isShow"
                v-model="formDrive.qualificationCertificate"
              ></el-input>
            </el-form-item>
            <el-form-item label="入场证信息 :">
              <span v-if="!isShow">{{ formDrive.passCertificate }}</span>
              <!-- 编辑显示 -->
              <el-input
                v-if="isShow"
                v-model="formDrive.passCertificate"
              ></el-input>
            </el-form-item>
            <br />
            <!-- 图片 -->
            <el-form-item
              label="图片信息 :"
              style="margin-left: 40px; margin-right: 325px"
            >
              <!-- <div v-if="!isShow"> -->
              <div>
                <el-image
                  style="margin-left: 40px; width: 212px; height: 159px"
                  fit="cover"
                  v-for="(item, index) in picture"
                  :key="index"
                  :src="item"
                ></el-image>
              </div>
              <!-- 编辑后 -->
              <!-- <el-upload
                v-if="isShow"
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  style="margin-left: 40px; width: 212px; height: 159px"
                  fit="cover"
                  v-for="(item, index) in picture"
                  :key="index"
                  :src="item"
                  class="avatar"
                />
                <i class="avatar-uploader-icon">
                  <img
                    src=""
                    alt=""
                  />
                </i>
              </el-upload> -->
            </el-form-item>
          </el-form>
          <!-- 编辑 -->
          <el-container>
            <el-footer style="margin-top: 250px">
              <el-row type="flex" justify="center">
                <el-button
                  v-if="!isShow"
                  size="medium"
                  type="primary"
                  @click="DriveEdit"
                  >编辑</el-button
                >
                <el-button
                  v-if="isShow"
                  size="medium"
                  type="primary"
                  @click="submitDrive"
                  >确认</el-button
                >
                <el-button v-if="isShow" size="medium" @click="isShow = false"
                  >取消</el-button
                >
              </el-row>
            </el-footer>
          </el-container>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import {
  getDriverUser,
  getDriveProve,
  //   postDrive,
} from "@/api/operational-range";
export default {
  name: "driver-detail",
  data() {
    return {
      title: "司机详情",
      //   标签页
      activeName: "first",
      //   基本信息
      formDate: {
        userId: "", //员工编号
        name: "", //名称
        agency: { name: "" }, //所属机构
        mobile: "", //手机号
        age: "", //年龄
      },
      //   驾驶证信息
      formDrive: {
        licenseNumber: "", //驾驶证号
        allowableType: "", //准驾车型
        initialCertificateDate: "", //初次领证日期
        validPeriod: "", //驾驶证有效期限
        driverAge: "", //驾龄
        licenseType: "", //驾驶证类型
        qualificationCertificate: "", //从业资格证
        passCertificate: "", //入场证信息
      },
      picture: [], //驾驶证图片信息
      //   编辑
      show: false,
      //   驾驶证编辑
      isShow: false,
    };
  },

  created() {
    console.log(this.$route.query.id);
    this.getUser();
  },

  methods: {
    // 基本信息
    async getUser() {
      const res = await getDriverUser(this.$route.query.id, {
        0: this.$route.query.id,
      });
      console.log(res.data);
      this.formDate = res.data;
    },
    // tab栏切换
    async handleClick(tab) {
      // 驾驶证信息
      if (tab.index === "1") {
        const res = await getDriveProve(this.$route.query.id, {
          0: this.$route.query.id,
        });
        // console.log(res.data);
        this.formDrive = res.data;
        const arr = res.data.picture.split(",");
        console.log(arr);
        // 图片信息
        this.picture = arr;
      }
    },
    // 基本信息编辑隐藏
    basicEdit() {
      this.show = true;
    },
    // 提交司机基本信息
    async submitBasic() {
      this.show = false;
    },
    // 驾驶证编辑
    DriveEdit() {
      this.isShow = true;
    },
    // 提交驾驶证
    async submitDrive() {
      //   const res = await postDrive(this.formDrive);
      //   console.log(res);
      this.$message.error("系统演示,不允许修改");
    },
    // 驾驶证图片
    // handleAvatarSuccess(res, file) {
    //   this.imageUrl = URL.createObjectURL(file.raw);
    // },
    // beforeAvatarUpload(file) {
    //   const isJPG = file.type === "image/jpeg";
    //   const isLt2M = file.size / 1024 / 1024 < 2;

    //   if (!isJPG) {
    //     this.$message.error("上传头像图片只能是 JPG 格式!");
    //   }
    //   if (!isLt2M) {
    //     this.$message.error("上传头像图片大小不能超过 2MB!");
    //   }
    //   return isJPG && isLt2M;
    // },
  },
};
</script>

<style scoped lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
::v-deep .el-card {
  text-align: left;
  line-height: 24px;
  padding-left: 20px;
  padding-right: 20px;
  //   height: 400px;
}
</style>
